<template>
	<view class="jia">
		<h1>请填写合作信息</h1>
		<view class="big_box">
			<view class="jia_box1 flex">
				<p><span>*</span>加油站名称：</p>
				<input type="text" placeholder="请输入加油站名称">
			</view>
			<view class="jia_box1 flex">
				<p><span>*</span>加油站数量：</p>
				<input type="text" placeholder="请选择加油站数量" @click="open()">
				<p>></p>
				<uni-popup ref="popup" :mask-click="false" class="box" maskClick="true">
					<view class="box1">
						<p>1-10</p>
						<p>10-20</p>
						<p>20个及以上</p>
					</view>
				</uni-popup>
			</view>
			<view class="jia_box1 flex">
				<p><span>*</span>加油站位置：</p>
				<input type="text" placeholder="请选择加油站数量" @click="open()">
				<p></p>
				<uni-popup ref="popup" :mask-click="false" class="box" maskClick="true">
					<view class="box1">
						<p>1-10</p>
						<p>10-20</p>
						<p>20个及以上</p>
					</view>
				</uni-popup>
			</view>
			<view class="jia_box1 flex">
				<p><span>*</span>详细地址：</p>
				<input type="text" placeholder="请输入加油站详细地址">
			</view>
			<view class="jia_box1 flex">
				<p><span>*</span>联系人：</p>
				<input type="text" placeholder="请输入联系人姓名">
			</view>
			<view class="jia_box1 flex">
				<p><span>*</span>联系电话（手机）：</p>
				<input type="text" placeholder="请输入手机号">
			</view>
			<view class="jia_box1 flex">
				<p><span>*</span>验证码：</p>
				<input type="text" placeholder="请输入验证码">
				<p class="huo">获取验证码</p>
			</view>
		</view>
		<view class="but">
			<button>提交</button>
		</view>
		
	</view>
</template>

<script>
export default {
  data() {
    return {
     xuanzhong: '1',
     remnant: "0"
    };
  },
 
  methods: {
	open() {
		this.$refs.popup.open('bottom')
	},
	close() {
		this.$refs.popup.close()
	},
	descInput: function(e) {
		console.log(e)
		this.remnant = e.detail.cursor
	},
	}
}
</script>

<style>
	page{background-color: #fff;}
		input{width: 400rpx;display: block;}
	.flex{display:flex;flex-direction: row;justify-content: space-between;align-items: center;}
	h1{padding:20rpx;width:90%;font-size:20px;color: #666;}
	.big_box{width:90%;padding:20rpx;margin:20rpx auto;}
	.jia_box1{border-bottom:1px solid #ccc;padding:10rpx;margin:20rpx  0;}
	.jia_box1 p span{color: #f00;}
	.box1{background-color: #fff;}
	.box1 p{border-bottom:#ccc 1px solid;color: #666;padding:20rpx;width:90%;}
	.huo{color: cornflowerblue;}
	.but{width:100%;position: absolute;bottom:10px;}
	.but button{width:50%;margin: 0 auto;background-color: cornflowerblue;color: #fff;border-radius:20rpx;}
</style>